<template>
  <div class="home">
    <!-- <button>开始</button> -->
    <el-button type="primary" @click="f1">抽奖开始</el-button>
    <!-- <button >暂停</button> -->
    <el-button type="success" plain @click="f2">看看是谁</el-button>
    <!-- <button>记录</button> -->
    <el-button type="info" @click="f3">记录一下</el-button>
    <div class="tc"></div>
    <!-- <div>记录</div> -->
    <div>
      <div class="text">
        <h1 class="text-one">抽奖名单</h1>
        <h1 class="text-two">中奖名单</h1>
      </div>
      <div class="pao">
        <div v-for="(item, i) in selectedStudentsIndex" :key="i">
          {{ item }}
        </div>
      </div>
      <div class="jilu">
        <div class="nrbj" v-for="(item, index) in jl" :key="index">恭喜{{ item }}</div>
      </div>
    </div>
    <div class="gxzj" v-show="isShow">
      <!-- 恭喜中奖 -->
    </div>
    <div class="renshu">
      抽奖人数
      <input v-model="conten" type="">
    </div>
    <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
      点我打开
    </el-button>
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <div class="elm">
        <span>看什么，还想抽奖？回去加班</span>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {


  name: 'Home',
  data() {
    return {
      zhang: ['张', '李', '王', '陈', '孙', '赵', '周', '冯', '高', '朱', '吴', '吕', '秦', '何', '刘', '金', '徐', '许', '姜', '华', '马', '叶', '方', '常', '康', '汪', '狄', '戴'],
      zhen: [],
      timer: '',
      jl: [],
      isShow: false,
      flag: true,
      drawer: false,
      conten: '',
      studentsIndex: '',
      selectedStudentsIndex: '',
    }
  },
  methods: {
    f1() {
      this.jl = []
      if (this.conten == '') {
        this.$message({
          showClose: true,
          message: '请输入抽奖人数之后再来进行抽奖!'
        });
      } else {
        if (this.flag) {
          this.flag = false;
          // console.log(this.zhang);
          this.timer = setInterval(() => {
            this.selectedStudentsIndex = this.zhang.sort(() => 0.5 - Math.random()).slice(0, this.conten)
          }, 100)

        }
      }
    },
    f2() {
      clearInterval(this.timer);
      this.flag = true;
      // console.log(this.selectedStudentsIndex);
    },
    f3() {
      this.zhang.filter((item, i) => {
        this.selectedStudentsIndex.filter(it => {
          if (this.selectedStudentsIndex.indexOf(item) > -1) {
            this.zhang.splice(i, 1)
          }
        })
      })
      this.jl.push(...this.selectedStudentsIndex)
      this.isShow = true
      setTimeout(() => {
        this.isShow = false
      }, 2000)
      var filename = "中奖名单";
      //文件内容
      var text = "幸运儿名单 \n";
      text += this.selectedStudentsIndex;

      var pom = document.createElement('a');
      pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
      pom.setAttribute('download', filename);
      if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
      } else {
        pom.click();
      }
    },
  }

}
</script>
<style>
* {
  margin: 0;
}

.tc {
  height: 100px;
}

.home {
  width: 100%;
  height: 928px;
  /* border: 1px solid blue; */
  text-align: center;
  /* margin-left: 300px; */
  position: relative;
  background-image: url(../海\,岩石\,女孩\,毛衣\,4K壁纸_彼岸图网.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;

}

.jg {
  width: 100px;
  height: 100px;
  /* background-color: blue; */
  border: 1px solid blue;


}

.jilu {
  font-size: 20px;
  font-family: 宋体;
  width: 200px;
  height: 300px;
  overflow: auto;
  position: absolute;
  top: 250px;
  right: 230px;
}

.gxzj {
  width: 100px;
  height: 100px;
  /* border: 1px solid blue; */
  line-height: 100px;
  position: absolute;
  top: 90px;
  right: 280px;
  background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.zhanhuiziliao.com%2Ffile%2Fupload%2F201911%2F03%2F160746381.gif&refer=http%3A%2F%2Fwww.zhanhuiziliao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657266803&t=72e76846b50808c4b8d2293bcbf9a263);
  background-size: 100%;


}

.pao {
  width: 200px;
  height: 100px;
  /* border: 1px solid blue; */
  margin-left: 220px;
  font-size: 20px;
  font-family: 宋体;
}

/* .nrbj {
  background-color: ;

} */

.text {
  display: flex;
  justify-content: space-between;
  margin-top: 55px;
}

.text-one {
  padding-left: 270px;
}

.text-two {
  padding-right: 270px;
}

.elm {
  width: 100%;
  height: 100%;

  background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F21%2F20200621214335_YrjcM.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657345604&t=d6e3d595b326185eef242525eccaeacf);
  background-size: 100%;
}

.elm span {
  font-size: 30px;
}

input {

  outline: none;
  background-color: rgba(0, 0, 0, 0);
}

.renshu {
  position: absolute;
  top: 70px;
  left: 38%;
  font-family: 宋体;
  color: rgb(236, 24, 24);
}
</style>
